import { useState, useImperativeHandle, forwardRef } from 'react';
import { Modal } from 'antd';
import styles from './index.less';
import { warnYellow } from '@/assets';

const TradeStrategyValidationModal = ({}, ref) => {
  useImperativeHandle(ref, () => ({ initHandle }));

  const [showModal, setShowModal] = useState(false),
    [validInfo, setValidInfo] = useState({});

  const initHandle = (validInfo) => {
    setShowModal(true);
    setValidInfo(validInfo);
  };
  const modalTitleRender = () => (
    <div className={styles.modalTitle}>
      <img src={warnYellow} />
      <span className={styles.text}>校验错误提示</span>
    </div>
  );
  return (
    <Modal
      className={styles.strategyValidModal}
      centered={true}
      title={modalTitleRender()}
      visible={showModal}
      footer={null}
      onCancel={() => {
        setShowModal(false);
      }}
    >
      <div>以下时点内存在方案买卖方向与交易单元锁定方向不符的情况，请调整方案或勾选自适应选项:</div>
      {validInfo?.list?.map(({ hourOrder, unitTitles }) => (
        <div
          className={styles.contentItem}
          key={`errorStrategy${hourOrder}`}
        >{`时点${hourOrder}：${unitTitles}`}</div>
      ))}
    </Modal>
  );
};

export default forwardRef(TradeStrategyValidationModal);
